<template>
  <aigc-card v-loading="isQuery" class="h-full" >
  <div :class="[isResult ? '' : 'center', 'piquery']">
    <div class="top">
      <div v-if="!isResult" class="logo">
        <span>
          <el-icon>
            <Connection />
          </el-icon>
          AigcAdmin
        </span>
      </div>
      <div class="input">
        <div class="search-input">
          <el-input v-model="searchWord" />
        </div>
        <div class="button-group">
          <el-button type="primary" @click="piSearch" >
            查询
          </el-button>
          <el-button type="primary" @click="queryReset"> 重置 </el-button>
        </div>
      </div>
    </div>
    <div class="result" v-if="isResult">
      <aigc-table :table-columns="piColumns" :table-data="resultList">
      </aigc-table>
    </div>
  </div>
</aigc-card>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import AigcTable from "@/components/aigcTable";
import { aigcMsg, aigcMsgType, msgInfo } from "@/utils";
const piColumns = ref([{ prop: "date", lable: "时间" }, {}]);
const resultList = ref([]);
const isResult = ref<boolean>(false);
const isQuery = ref<boolean>(false);
const searchWord = ref("");

const queryReset = () => {
  searchWord.value = "";
};
const piSearch = async () => {
  //todo:api调用查询接口

  isQuery.value = true;
  msgInfo("查询开始");
 
  await setTimeout(() => {
    isQuery.value = false;
    msgInfo("查询结束");
  }, 3000);
 
};
onMounted(() => {
  isResult.value = resultList && resultList.value.length > 0 ? true : false;
});
</script>
<style lang="scss" scoped>
.piquery {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    .logo {
      display: flex;
      justify-content: center;
      width: 100%;
      margin: 0 auto;
      font-weight: 800;
      span {
        font-size: 24px;
      }
    }
    .input {
      display: flex;
      width: 80%;
      margin: 0 auto;
      margin-top: 20px;
      .search-input {
        width: 80%;
      }
      .button-group {
        width: 200px;
        margin-left: 16px;
      }
    }
  }
}
.center {
  margin-top: 33.3%;
}
</style>
